<template>
  <div ref="content">
    <a-card :bordered="false">
      <!-- 增加 -->
      <biz-approval-setting-add-form
        v-if="showAddModal"
        ref="bizApprovalSettingAddForm"
        :documentTypeOptions="documentTypeOptions"
        @ok="getList"
        @close="showAddModal = false"
      />
      <!-- 编辑 -->
      <biz-approval-setting-edit-form
        v-if="showEditModal"
        ref="bizApprovalSettingEditForm"
        :documentTypeOptions="documentTypeOptions"
        :approveStepOptions="approveStepOptions"
        @ok="getList"
        @close="showEditModal = false"
      />
      <a-page-header
        style="border-bottom: 1px solid rgb(235, 237, 240);padding:8px 16px;"
        title=""/>
      <split splitHeight="100%" leftWidth="220" >
        <template slot="paneL">
          <document-tree
            ref="documentTree"
            :documentTypeOptions="documentTypeOptions"
            :defalutExpandedKeys="expandedKeys"
            @setDataOptionInfo="setDataOptionInfo"
            @select="clickDocumentNode"
          />
        </template>
        <template slot="paneR">
          <!-- 条件搜索 -->
          <div class="table-page-search-wrapper">
            <a-form :labelCol="labelCol" :wrapperCol="wrapperCol" ref="queryForm">
              <a-row :gutter="32">
                <a-col :span="6" >
                  <a-form-item label="审批步骤" prop="approveStep">
                    <a-select placeholder="请选择审批步骤" v-model="queryParam.approveStep" style="width: 100%" allow-clear>
                      <a-select-option v-for="(d, index) in approveStepOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col>
              <span class="table-page-search-submitButtons" style="float: right;">
                <a-button type="primary" @click="handleQuery"><a-icon type="search" />查询</a-button>
                <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</a-button>
              </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <a-divider />
          <advance-table
            title="审批权限设置"
            :pagination="{
          current: queryParam.pageNum,
          pageSize: queryParam.pageSize,
          total: total,
          showSizeChanger: true,
          showLessItems: true,
          showQuickJumper: true,
          showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
          onChange: changeSize,
          onShowSizeChange: onShowSizeChange
        }"
            tableKey="base-bizApprovalSetting-index-table"
            @change="handleTableChange"
            rowKey="id"
            size="middle"
            @refresh="getList"
            :columns="columns"
            :data-source="bizApprovalSettingList"
            :loading="loading"
            :format-conditions="true"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          >
            <div class="table-operations" slot="button">
              <a-button type="primary" @click="handleAdd" v-hasPermi="['biz:bizApprovalSetting:add']">
                <a-icon type="plus" />新增
              </a-button>
              <a-button type="danger" v-if="!multiple" :disabled="multiple" @click="handleDelete" v-hasPermi="['biz:bizApprovalSetting:remove']">
                <a-icon type="delete" />删除
              </a-button>
              <a-button type="" @click="handleExport" v-hasPermi="['biz:bizApprovalSetting:export']">
                <a-icon type="download" />导出
              </a-button>
            </div>
            <span slot="documentType" slot-scope="{record}">
          {{ documentTypeFormat(record) }}
        </span>
            <span slot="approveStep" slot-scope="{record}">
          {{ approveStepFormat(record) }}
        </span>
            <span slot="operation" slot-scope="{text, record}">
          <a @click="handleUpdate(record)" v-hasPermi="['biz:bizApprovalSetting:edit']">
            修改
          </a>
          <a-divider type="vertical" v-hasPermi="['biz:bizApprovalSetting:remove']"/>
          <a @click="handleDelete(record)" v-hasPermi="['biz:bizApprovalSetting:remove']">
            删除
          </a>
        </span>
          </advance-table>
        </template>
      </split>
    </a-card>
  </div>
</template>

<script>
import DocumentTree from './modules/DocumentTree'
import AdvanceTable from '@/components/pt/table/AdvanceTable'
import Split from '@/components/pt/split/Index'
import { listBizApprovalSetting, delBizApprovalSetting, exportBizApprovalSetting, getInitData } from '@/api/biz/bizApprovalSetting'
import BizApprovalSettingAddForm from '@/views/biz/bizapprovalsetting/modules/BizApprovalSettingAddForm'
import BizApprovalSettingEditForm from '@/views/biz/bizapprovalsetting/modules/BizApprovalSettingEditForm'
import SelectUser from '@/components/pt/selectUser/SelectUser'
export default {
  name: 'User',
  components: {
    AdvanceTable,
    Split,
    DocumentTree,
    BizApprovalSettingAddForm,
    BizApprovalSettingEditForm,
    SelectUser

  },
  data () {
    return {
      // 单据类型字典
      documentTypeOptions:[],
      approveStepOptions:[],
      showAddModal: false,
      showEditModal: false,
      showProcessModal:false,
      showBomModal:false,
      list: [],
      selectedRowKeys: [],
      selectedRows: [],
      // 高级搜索 展开/关闭
      advanced: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      ids: [],
      expandedKeys: [],
      loading: false,
      total: 0,
      documentTypeCheckedValue: {},
      // 审批权限设置表格数据
      bizApprovalSettingList: [],
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      queryParam: {
        pageNum: 1,
        pageSize: 10,
        categoryId: undefined,

        productCode: undefined,

        mnemonicCode: undefined

      },
      columns: [
        {
          title: '单据类型',
          dataIndex: 'documentType',
          scopedSlots: { customRender: 'documentType' },
          align: 'center',
          width: '30%'
        },
        {
          title: '审批步骤',
          dataIndex: 'approveStep',
          scopedSlots: { customRender: 'approveStep' },
          align: 'center',
          width: '30%'
        },
        {
          title: '审批人',
          dataIndex: 'approvePersonName',
          align: 'left',
          width: '30%'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          align: 'center',
          width: '10%',
          scopedSlots: { customRender: 'operation' }
        }
      ]
    }
  },
  filters: {
  },
  created () {
    this.getList()
    getInitData('document_type').then(response => {
      response.data.document_type.forEach(item=>{
        item.children=[];
        item.isLeaf=true;
        this.documentTypeOptions.push(item)
      })
        this.$nextTick(() => {
          let treeDom = document.querySelector('.ant-tree>li')
          if(treeDom.children.length>1) {
            let treeNode= treeDom.children[1]
            treeNode.click()
          }
        })
    })
  },
  computed: {
  },
  watch: {
  },
  methods: {
    getExpandedKeys (nodes, expandLevel) {
      if (expandLevel > 1) {
        // 最后一层不展开
        if(!nodes) {
          return;
        }
        nodes.forEach(node => {
          this.expandedKeys.push(node.id)
          expandLevel = expandLevel - 1
          return this.getExpandedKeys(node.children, expandLevel)
        })
      }
    },
    /** 查询定时任务列表 */
    getList () {
      this.loading = true
      this.loading = true
      listBizApprovalSetting(this.queryParam).then(response => {
        this.bizApprovalSettingList = response.data.list
        this.total = response.data.total
        this.loading = false
      })
    },
    // 单据类型字典翻译
    documentTypeFormat (row) {
      if (row.documentType) {
        return this.selectDictLabel(this.documentTypeOptions, row.documentType)
      } else {
        return ''
      }
    },
    // 审批步骤字典翻译
    approveStepFormat (row) {
      if (row.approveStep) {
        return this.selectDictLabel(this.approveStepOptions, row.approveStep)
      } else {
        return ''
      }
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParam.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.queryParam = {
        pageNum: 1,
        pageSize: 10,
        categoryId: undefined,

        productCode: undefined,

        mnemonicCode: undefined

      }
      this.handleQuery()
    },
    onShowSizeChange (current, pageSize) {
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    changeSize (current, pageSize) {
      this.queryParam.pageNum = current
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.ids = this.selectedRows.map(item => item.id)
      this.single = selectedRowKeys.length !== 1
      this.multiple = !selectedRowKeys.length
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    clickDocumentNode (node) {
      this.queryParam.documentType = node.$options.propsData.eventKey
      this.documentTypeCheckedValue = { ids: node.$options.propsData.eventKey, names: node.$options.propsData.title }
      this.getList()
      if(node.$options.propsData.eventKey=='1') {
        //销售单
        getInitData('sale_order_approval_step').then(response => {
          this.approveStepOptions = response.data.sale_order_approval_step
        })
      }
    },
    handleAdd () {
      this.showAddModal = true
      this.$nextTick(() => (
        this.$refs.bizApprovalSettingAddForm.handleAdd()
      ))
    },
    handleUpdate (record, ids) {
      this.showEditModal = true
      this.$nextTick(() => (
        this.$refs.bizApprovalSettingEditForm.handleUpdate(record, ids)
      ))
    },
    /** 删除按钮操作 */
    handleDelete (row) {
      var that = this
      const bizApprovalSettingIds = row.id || this.ids
      this.$confirm({
        title: '确认删除所选中数据?',
        onOk () {
          return delBizApprovalSetting(bizApprovalSettingIds)
            .then(() => {
              that.onSelectChange([], [])
              that.getList()
              that.$message.success(
                '删除成功',
                3
              )
            })
        },
        onCancel () {}
      })
    },
    /** 导出按钮操作 */
    handleExport () {
      var that = this
      this.$confirm({
        title: '是否确认导出?',
        content: '此操作将导出当前条件下所有数据而非选中数据',
        onOk () {
          return exportBizApprovalSetting(that.queryParam)
            .then(response => {
              that.download(response.msg)
              that.$message.success(
                '导出成功',
                3
              )
            })
        },
        onCancel () {}
      })
    },
    setDataOptionInfo (treeDataOption) {
      this.documentTypeOptions = treeDataOption
    },
    handleTableChange (pagination, filters, sorter) {
      if (sorter.field !== undefined && sorter.field !== null && sorter.field !== '') {
        this.queryParam.orderByColumn = 't.' + sorter.field
        this.queryParam.isAsc = sorter.order
      }
      this.getList()
    }
  }
}
</script>
<style lang="less" scoped>
.ant-divider-horizontal {
  margin:  0;
  background: rgb(235, 237, 240);
}
.demo-split{
  height: 200px;
}
.demo-split-pane{
  padding: 10px;
}
.ant-avatar{
  font-size: 12px;
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 8px;
}
</style>
